<template>
  <div class="security">
    <h1>
      完成个人资质认证，让人才放心投递！
      <span>应网安部要求，为保障求职者与您的合法权益，需完成个人资质认证。</span>
    </h1>
    <el-form class="pic_box" :model="form" ref="form" :rules="rules">
      <h3>证照名称确认</h3>
      <el-form-item label="个人姓名" prop="name">
        <el-input v-model="form.name" placeholder="个人姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard">
        <el-input v-model="form.idCard" placeholder="身份证号码"></el-input>
      </el-form-item>
      <h3>单位资质认证</h3>
      <p>
        <span>证件照片</span>
        <i class="icon_blue"></i>身份证、护照等
      </p>
      <div class="upload">
        <el-upload ref="certificatesUpload" class="upload-demo" action :limit="5" :file-list="certificates"
          :http-request="certificatesPic" :show-file-list="false" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <ul>
          <li v-for="(item,index) in cer_len" :key="index">
            <img :src="certificates[index]?certificates[index].filePath:null" @click="()=>{certificatesRemove(index)}"
              alt />
          </li>
        </ul>
      </div>
      <p>
        <span>工作证明</span>
        <i class="icon_blue"></i>工牌、企业邮箱、内部办公系统等
      </p>
      <div class="upload">
        <el-upload ref="jobUpload" class="upload-demo" action :limit="5" :http-request="jobPic" :file-list="job"
          :show-file-list="false" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <ul>
          <li v-for="(item,index) in job_len" :key="index">
            <img :src="job[index]?job[index].filePath:null" @click="()=>{jobRemove(index)}" alt />
          </li>
        </ul>
      </div>
    </el-form>
    <div class="btn_box">
      <el-button class="submit" @click="onSubmit" :loading="loading" v-loading.fullscreen.lock="loading">提交审核
      </el-button>
      <el-button class="back" @click="back">返回首页</el-button>
    </div>
  </div>
</template>

<script>
import { postPicture, companyStaffAuth } from '../../../api/index';
import { companyStaffAuthInfo } from '../../../api/home';
export default {
  data () {
    return {
      loading: false,
      id: '',
      certificates: [],
      job: [],
      cer_len: 3,
      job_len: 3,
      form: {
        name: '',
        idCard: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'change' },
          {
            pattern: /^[1-9]\d{5}(19|20)\d{2}[01]\d[0123]\d\d{3}[xX\d]$/,
            message: '请输入正确的身份证号',
            trigger: 'change'
          }
        ]
      }
    };
  },
  mounted () {
    let companyId = this.$route.query.companyId;
    console.log(companyId);

    if (companyId) {
      // 获取个人信息并解析认证照片
      companyStaffAuthInfo({ companyId }).then(data => {
        if (data.success) {
          this.form = data.data || {};
          this.certificates = data.data.companyStaffAuthFileInVoList.filter(item => item.type === 1) || [];
          this.cer_len = this.certificates.length;
          this.job = data.data.workStaffAuthFileInVoList.filter(item => item.type === 2) || [];
          this.job_len = this.job.length;
          this.id = data.data.id || '';
          console.log(this.job, this.certificates);
        } else {
          this.$message.error(`${data.msg}`);
          this.$router.push({ path: '/' });
        }
      });
    }
  },
  methods: {
    // 删除证件照
    certificatesRemove (val) {
      let file = this.certificates.find((item, index) => index === val);
      this.certificates = this.certificates.filter((item, index) => index !== val);
      console.log(this.$refs.certificatesUpload);
      console.log(this.certificates);
      if (file) {
        console.log(file.file);
        this.$refs.certificatesUpload.onRemove(file, this.certificates);
      }
    },
    // 删除工作证明
    jobRemove (val) {
      let file = this.job.find((item, index) => index === val);
      this.job = this.job.filter((item, index) => index !== val);
      console.log(this.$refs.jobUpload);
      console.log(this.job);
      if (file) {
        console.log(file.file);
        this.$refs.jobUpload.onRemove(file, this.job);
      }
    },
    // 上传工作证明
    jobPic (param) {
      let obj = {};
      obj.file = param.file;
      let fd = new FormData();
      fd.append('file', param.file);
      postPicture(fd).then(data => {
        if (data.success) {
          obj.filePath = data.data.fileUrl;
          console.log(data);
          this.job.push(obj);
          this.job.length > 3 ? (this.job_len = this.job.length) : null;
          console.log(this.job);
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    // 上传证件
    certificatesPic (param) {
      let obj = {};
      obj.file = param.file;
      let fd = new FormData();
      fd.append('file', param.file);
      postPicture(fd).then(data => {
        if (data.success) {
          obj.filePath = data.data.fileUrl;
          console.log(data);
          this.certificates.push(obj);
          this.certificates.length > 3 ? (this.cer_len = this.certificates.length) : null;
          console.log(this.certificates);
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    // 保存
    onSubmit () {
      if (this.job.length === 0) {
        this.$alert('请上传', '提示');
        return;
      }
      if (this.certificates.length === 0) {
        this.$alert('请上传', '提示');
        return;
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          let workStaffAuthFileInVoList = this.job.map(item => {
            let obj = {};
            console.log(item);
            obj.filePath = item.filePath;
            if (item.companyId) {
              obj.fileSize = item.fileSize;
            } else {
              obj.fileSize = item.file.size;
            }
            obj.type = 2;
            return obj;
          });
          let companyStaffAuthFileInVoList = this.certificates.map(item => {
            let obj = {};
            console.log(item);
            obj.filePath = item.filePath;
            if (item.companyId) {
              obj.fileSize = item.fileSize;
            } else {
              obj.fileSize = item.file.size;
            }
            obj.type = 1;
            return obj;
          });
          let query = {
            id: this.id,
            name: this.form.name,
            idCard: this.form.idCard,
            workStaffAuthFileInVoList,
            companyStaffAuthFileInVoList
          };
          companyStaffAuth(query).then(data => {
            if (data.success) {
              this.loading = false;
              this.$message.success('提交审核成功');
              this.$router.push({ path: '/' });
            } else {
              this.loading = false;
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          this.$message.error('请输入姓名和身份证');
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 返回首页
    back () {
      this.$router.push({ path: '/' });
    }
  }
};
</script>

<style scoped>
.security {
    background: rgba(255, 255, 255, 1);
}
.security p {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    margin-top: 24px;
}
.security p span {
    text-align: right;
    margin-left: 238px;
    margin-right: 24px;
    width: 94px;
    display: inline-block;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.security h3 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin: 23px 0 4px;
}
.security h3::after {
    display: block;
    content: '';
    width: 28px;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
.icon_blue {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(0, 147, 255, 1);
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
}
.security h1 {
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 28px 45px 13px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.security h1 span {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.security .upload {
    width: 630px;
    margin: 32px auto 0;
    position: relative;
}
.security .upload /deep/ .upload-demo {
    vertical-align: top;
    display: inline-block;
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-right: 24px;
}
.security .upload /deep/ .el-button {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    line-height: 0;
}
.security .upload ul {
    display: inline-block;
    list-style: none;
    width: 500px;
    overflow: hidden;
}
.security .upload ul li {
    float: left;
    width: 124px;
    height: 124px;
    margin-right: 40px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
}
.security .upload ul li img {
    width: 100%;
    height: 100%;
}
.security .pic_box {
    width: 1105px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    margin: 0 auto;
}
.security .pic_box .el-form-item /deep/ .el-form-item__label {
    text-align: right;
    margin-left: 238px;
    margin-right: 24px;
    width: 94px;
    display: inline-block;
    height: 40px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 40px;
    padding: 0;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.security .pic_box .el-form-item /deep/ .el-form-item__content {
    width: 286px;
    display: inline-block;
}
.security .pic_box .el-form-item /deep/ .el-input__inner {
    width: 286px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.security .el-form-item {
    margin-top: 24px;
}
.security .btn_box {
    height: 140px;
    line-height: 140px;
    text-align: center;
}
.security .submit {
    width: 148px;
    height: 49px;
    background: rgba(0, 147, 255, 1);
    opacity: 1;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
}
.security .back {
    width: 146px;
    height: 47px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-left: 32px;
}
</style>